<template>
    <basic-layout title="业务指南" :showAddBtn="false">
        <div class="columnFlex">
            <!-- 查询条件 -->
            <van-row class="search-row">
                <van-search v-model="formData.guideKeyword" maxlength="20" show-action label="" placeholder="指南标题 / 指南描述" @search="onRefresh">
                    <template #action>
                        <div @click="onRefresh">搜索</div>
                    </template>
                </van-search>
            </van-row>
            <!-- 列表 -->
            <van-row class="listCon">
                <van-pull-refresh class="pullRefresh" v-model="refreshLoading" @refresh="onRefresh">
                    <van-list
                        v-model="loading"
                        :finished="finished"
                        :finished-text="listData.length ? '没有更多了' : ''"
                        @load="onLoad"
                    >
                        <van-swipe-cell v-for="val in listData" :key="val.mailId">
                            <div class="cellContent" @click="handleDetail(val)">
                                <div class="top">
                                    <p class="title">{{ val.guideTitle }}</p>
                                    <p>
                                        <span class="label">指南描述：</span>
                                        {{ val.guideDesc }}
                                    </p>
                                    <p>
                                        <span class="label">指南解答：</span>
                                        <span>{{ val.guideAnswer }}</span>
                                    </p>
                                </div>
                            </div>
                        </van-swipe-cell>
                    </van-list>
                    <van-empty v-if="!loading && !listData.length" class="custom-image" :image="require('@/assets/images/empty.png')" description="暂无数据" />
                </van-pull-refresh>
            </van-row>
        </div>
    </basic-layout>
</template>

<script>
    import { queryAssistGuide } from '@/api/platframe/problem';
    export default {
        props: {

        },
        components: {

        },
        data () {
            return {
                loading: false,
                finished: false,
                refreshLoading: false,
                formData: {
                    guideKeyword: '',
                    guideType: '2',
                    pageNum: 1,
                    pageSize: 20
                },
                listData: []
            };
        },
        created () {
            this.getListData();
        },
        computed: {

        },
        mounted () {

        },
        watch: {
            
        },
        methods: {
            // 获取列表数据
            getListData () {
                if (this.formData.guideKeyword && !this.$commonReg.textReg.test(this.formData.guideKeyword)) {
                    this.$Notify({ type: "warning", message: `关键字${this.$commonReg.textMsg}` });
                    return;
                }
                this.loading = true;
                queryAssistGuide(this.formData).then((res) => {
                    this.loading = false;
                    if (res.code === 1000 && res.data) {
                        this.listData = [...this.listData, ...res.data.records];
                        if (this.listData.length >= res.data.total) {
                            this.finished = true;
                        }
                    }
                }).catch(() => {
                    this.loading = false;
                    this.finished = true;
                });
            },
            onRefresh() {
                this.refreshLoading = false;
                this.finished = false;
                this.listData = [];
                this.formData.pageNum = 1;
                this.getListData();
            },
            onLoad () {
                this.formData.pageNum++;
                this.getListData();
            },
            // 查看详情
            handleDetail (item) {
                this.$router.push({ path: `/guide/detail?guideId=${item.guideId}`});
            },
        }
    };
</script>

<style scoped lang="less">
    .listCon {
        .cellContent {
            padding: 10px;
            box-sizing: border-box;
        }
    }
</style>